<script setup lang="ts">
const { isLogin, details } = $(useUser())
const username = computed(() => isLogin ? details?.username : '点击登录')
const avatar = computed(() => isLogin ? details?.head_img : '/static/images/icons/mine/user.png')
const learnTime = computed(() => isLogin ? `学习时⻓：${details?.learn_time || (100 / 3600).toFixed(2)}⼩时` : '新⽤户专属200D币礼包')
</script>

<template>
    <view class="flex px-2" w-full>
        <view relative>
            <image class="b b-#f38e48" :src="avatar" w-120 h-120 rounded-full mode="scaleToFill" />
        </view>
        <view m="y-1 x-4" flex="~ col">
            <navigator text="40 #4d555d" :url="!isLogin ? `/pages/login/password` : ''" hover-class="none">
                {{ username }}
            </navigator>
            <view between w-full>
                <text text="30 #f38e48">
                    {{ learnTime }}
                </text>
            </view>
        </view>
    </view>
</template>


<style></style>
